<template>
	<el-collapse v-model="searchName" accordion class="xw-search" @change="$emit('change')">
		<el-collapse-item title="条件筛选" name="1">
			<el-form :inline="true" :model="searchData" class="demo-form-inline">
				<el-form-item label="审批人">
					<el-input v-model="searchData.user" placeholder="审批人"></el-input>
				</el-form-item>
				<el-form-item label="活动区域">
					<el-select v-model="searchData.region" placeholder="活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="xw-search_footer">
				<el-button :loading='loading' type="primary" @click="$emit('search',searchData)">查询</el-button>
			</div>
		</el-collapse-item>
	</el-collapse>
</template>

<script>
	export default {
		props: {
			searchData: {
				type: [Array, Object],
				default: []
			},
			loading: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				searchName: '1'
			}
		}
	}
</script>

<style lang="scss">
	.xw-search {

		// border: 1px solid #EBEEF5;
		// border-top-width: 0px;
		// border-bottom-width: 0px;
		.el-collapse-item {
			padding: 0 15px;

			&__header,
			&__wrap {
				border-bottom: 0px
			}

			&__wrap {
				// transition: 0s !important;
			}

			&__content {
				padding-bottom: 15px;
			}
		}

		.el-collapse-item:last-child {
			margin-bottom: 0px;
		}

		&_footer {
			display: flex;
			justify-content: flex-end;
		}
	}
</style>